<template>
	<view class="service" :style="`padding-bottom: 140rpx;`">
		<view class="nav">
			<uni-nav-bar leftWidth="200rpx" :border="false" rightWidth="200rpx" title="服务管理" left-icon="back"
				@clickLeft="back" backgroundColor="transparent">
				<block slot="right">
					<!-- <view class="address" @click="toChoose" v-if="!flag">
						<uni-icons type="plus" color="#2E7EFA" :size="20"></uni-icons>
						<text class="hidden" style="flex: 1;">添加</text>
					</view>
					<view class="address" @click="toChoose" v-else>
						<uni-icons type="close" color="#2E7EFA" :size="20"></uni-icons>
						<text class="hidden" style="flex: 1;">取消</text>
					</view> -->
				</block>
			</uni-nav-bar>
		</view>


		<view class="list flex_r_between" v-for="(item,index) in list" :key="index" @click="chooseService(item)">
			<view class="left">
				<image :src="item.images[0]" mode="aspectFill"></image>
				<view class="info">
					<view class="name flex">
						<view>{{item.name}}</view>
					</view>
					<view class="text">{{item.profile}}</view>
					<view class="price flex">
						{{Number(item.price).toFixed(0)}} <text>元/次</text>
					</view>
					<view class="right">
						<uni-icons type="checkbox-filled" :size="26" color="#3393FF"
							v-if="selectList.indexOf(item.id) > -1"></uni-icons>
						<uni-icons type="checkbox-filled" :size="26" color="#C3C2C2" v-else></uni-icons>
					</view>
				</view>
			</view>

		</view>

		<blankPage img="https://qiniu-cdn.maeiyun.com/imgs/blank/no_order.png" text="暂无内容" :width="161" :height="129" v-show="list.length == 0"></blankPage>

		<view class="btn flex_r_between">
			<view class="left">
				<uni-icons type="checkbox-filled" :size="26" color="#3393FF" v-if="selectList.length == list.length"
					@click="onAll(false)"></uni-icons>
				<uni-icons type="checkbox-filled" :size="26" color="#C3C2C2" v-else @click="onAll(true)"></uni-icons>
				<text>全选</text>
				<i>选择{{selectList.length}}个服务</i>
			</view>
			<view class="right" @click="submit">下一步</view>
		</view>


		<u-modal v-model="show" title="提示" content="服务内容修改成功" :confirm-style="{
				'backgroundColor':'#EAF2FE',
				'font-size': '30rpx',
				'font-weight': 600,
				'color': '#307BFB',
			}" @confirm="back"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectList: [],

				list: [],

				page: 1,

				total: 0,

				show: false,
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			chooseService(e) {
				if (this.selectList.indexOf(e.id) > -1) {
					this.selectList.forEach((item, index) => {
						if (item == e.id) {
							this.selectList.splice(index, 1)
						}
					})
				} else {
					this.selectList.push(e.id)
				}
			},
			onAll(e) {
				if (e) {
					this.selectList = []
					this.list.forEach(item => {
						this.selectList.push(item.id)
					})
				} else {
					this.selectList = []
				}
			},
			getList() {
				this.request.httpTokenRequest({
					url: "technician.technician/getTechnicianService",
					method: "get"
				}, {
					category_id: 0,
				}).then(res => {
					if (res.code == 0) {
						res.data.forEach(item => {
							this.list.push(item)
							if (item.checked) {
								this.selectList.push(item.id)
							}
						})
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			submit() {
				let arr
				if (this.selectList.length == 0) {
					return this.$util.msg('请选择服务内容')
				}
				if (this.selectList.length == 1) {
					arr = this.selectList[0]
				} else {
					arr = this.selectList.join(',')
					this.request.httpTokenRequest({
						url: "technician.technician/setTechnicianService",
						method: "post"
					}, {
						service_ids: arr
					}).then(res => {
						if (res.code == 0) {
							uni.navigateTo({
								url:'/technician/info/location'
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: res.msg
							})
						}
					}, error => {})
				}
			},
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++
				this.getList()
			}
		}
	}
</script>

<style lang="less" scoped>
	#dark {
		filter: grayscale(100%);
	}

	.service {
		padding: calc(var(--status-bar-height) + 44px) 30rpx 30rpx;
		min-height: 100vh;
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-size: 100%;
		z-index: 99;
		padding-top: var(--status-bar-height);
		background: #F5F7F8;

		.address {
			display: flex;
			align-items: center;
			height: 54rpx;
			background: #FFFFFF;
			border-radius: 27rpx;
			padding: 0 20rpx 0 5rpx;

			text {
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-left: 6rpx;
			}
		}


	}


	.list {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 35rpx 30rpx 30rpx;
		display: flex;
		margin-bottom: 30rpx;
		align-items: flex-end;
		width: 100%;

		.left {
			display: flex;
			width: 100%;

			image {
				width: 160rpx;
				height: 241rpx;
				margin-right: 31rpx;
				flex-shrink: 1;
			}

			.info {
				flex: 1;

				.right {
					align-items: center;
					display: flex;
					flex-direction: row-reverse;
				}

				.name {
					align-items: center;

					view {
						font-size: 30rpx;
						font-weight: 600;
						color: #0F0807;
						line-height: 42rpx;
					}
				}

				.text {
					font-size: 22rpx;
					color: #888889;
					line-height: 30rpx;
					margin: 21rpx 0 31rpx;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					word-break: break-all;
				}

				.price {
					align-items: flex-end;
					font-size: 34rpx;
					font-weight: 600;
					color: #EF5233;
					line-height: 48rpx;

					text {
						font-size: 18rpx;
						color: #EC2700;
						line-height: 43rpx;
						margin-left: 6rpx;
					}
				}
			}
		}

		.right {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.btn {
		width: 100vw;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 27rpx 0 70rpx;
		box-sizing: border-box;

		.left {
			display: flex;
			align-items: center;

			text {
				font-size: 30rpx;
				color: #0F0807;
				line-height: 42rpx;
				margin: 0 20rpx 0 2rpx;
			}

			i {
				font-style: normal;
				font-size: 26rpx;
				color: #929292;
				line-height: 37rpx;
			}
		}

		.right {
			width: 200rpx;
			height: 68rpx;
			background: #3393FF;
			border-radius: 34rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 68rpx;
			text-align: center;
		}
	}
</style>